<template>
  <div class="index-content">
    <div class="text">
      <keep-alive>
        <router-view v-if="$route.meta.keepAlive"></router-view>
      </keep-alive>
      <router-view v-if="!$route.meta.keepAlive"></router-view>
    </div>
    <div class="index-footer">
      <div ref="index" class="footer-router-box" @click="goindex">
        <i class="iconfont icon-shouye"></i>
        <span>首页</span>
      </div>
      <div ref="find" class="footer-router-box" @click="gofind">
        <i class="iconfont icon-faxian"></i>
        <span>发现</span>
      </div>
      <div ref="upload" class="footer-router-box" @click="goupload">
        <i class="iconfont icon-xiangji2"></i>
      </div>
      <div ref="message" class="footer-router-box" @click="gomessage">
        <i class="iconfont icon-liaotian"></i>
        <span>消息</span>
      </div>
      <div ref="user" class="footer-router-box" @click="gouser">
        <i class="iconfont icon-wode2"></i>
        <span>我的</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "afooter",
  data(){
    return{

    }
  },
  mounted() {
    this.$refs.index.style.color='green'
  },
  methods:{
    goindex(){
      this.$router.push(
        {path: '/index'},
        onComplete => {},
        onAbort => {}
      )
      this.$refs.index.style.color='green'
      this.$refs.find.style.color=''
      this.$refs.upload.style.color=''
      this.$refs.message.style.color=''
      this.$refs.user.style.color=''
    },
    gofind(){
      this.$router.push(
        {path: '/find'},
        onComplete => {},
        onAbort => {}
      )
      this.$refs.index.style.color=''
      this.$refs.find.style.color='green'
      this.$refs.upload.style.color=''
      this.$refs.message.style.color=''
      this.$refs.user.style.color=''
    },
    goupload(){
      this.$router.push(
        {path: '/upload'},
        onComplete => {},
        onAbort => {}
      )
      this.$refs.index.style.color=''
      this.$refs.find.style.color=''
      this.$refs.upload.style.color='green'
      this.$refs.message.style.color=''
      this.$refs.user.style.color=''
    },
    gomessage(){
      this.$router.push(
        {path: '/message'},
        onComplete => {},
        onAbort => {}
      )
      this.$refs.index.style.color=''
      this.$refs.find.style.color=''
      this.$refs.upload.style.color=''
      this.$refs.message.style.color='green'
      this.$refs.user.style.color=''
    },
    gouser(){
      this.$router.push(
        {path: '/user'},
        onComplete => {},
        onAbort => {}
      )
      this.$refs.index.style.color=''
      this.$refs.find.style.color=''
      this.$refs.upload.style.color=''
      this.$refs.message.style.color=''
      this.$refs.user.style.color='green'
    },
  }
}
</script>

<style scoped lang="scss">
.index-content{
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  .text{
    height: 0;
    flex-grow: 1;
    background-color: #f6f6f6;
  }
  .index-footer{
    z-index: 999;
    height: vw(100);
    background-color: #fafafa;
    display: flex;
    justify-content: space-between;
    padding: 5px 0;
    .footer-router-box{
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 0 vw(40);
      justify-content: center;
      i{
        font-size: vw(60);
      }
      span{
        font-size: vw(28);
      }
      &:nth-child(3){
        i{
          font-size: vw(85);
          color: lightsalmon;
        }
      }
    }
  }
}
</style>
